<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <v-toolbar-items v-loading="loading">
        <v-menu offset-y>
            <template v-slot:activator="{ on }">
                <v-btn v-on="on" text>
                    <v-avatar :size="30">
                        <img :src="userInfo.avatar" alt="">
                    </v-avatar>
                    &nbsp;{{userInfo.name}}
                </v-btn>
            </template>
            <v-list>
                <v-list-item :to="{name: 'Profile'}">
                    <v-list-item-title>Profile</v-list-item-title>
                </v-list-item>
                <v-list-item :to="{name: 'ManagementHome'}">
                    <v-list-item-title>Administrator</v-list-item-title>
                </v-list-item>
                <v-divider/>
                <v-list-item @click="logout">
                    <v-list-item-title>Logout</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
    </v-toolbar-items>
</template>

<script>
    import {mapGetters} from 'vuex';
    import api from '@/comment/apis/user/Auth'

    export default {
        name: "HeaderUser",
        data() {
            return {
                loading: false
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        methods: {
            logout() {
                this.loading = true;
                api.authDestroy().then(res => {
                    this.$util.handelHttpResponse(res, true).then();
                }).finally(() => {
                    this.loading = false;
                    this.$store.commit('setLoginStatus', false);
                    this.$store.commit('logout');
                    this.$router.replace({name: 'Index'})
                });
            }
        }
    }
</script>

<style scoped>

</style>